<template>
  <div class="ProjectList">
    <div class="title">
      {{sortTitle}}
    </div>
    <grid :border="false" :column-num="3">
      <grid-item
        v-for="item in dataList"
        :key="item.id"
        @click="showDetail(item)">
        <van-image :src="item.imgPath" />
        <dev class="list-text">{{item.projec_name}}</dev>
      </grid-item>
    </grid>
  </div>
</template>

<script>
import { Grid, GridItem, Image as VanImage, ImagePreview } from 'vant'
import { getOneProject } from '@/request/api'
export default {
  name: 'ProjectList',
  components: {
    Grid,
    GridItem,
    VanImage,
    ImagePreview
  },
  data () {
    return {
      imagesShowDate: [],
      img_front: 'http://backmanage.yuxjt.com/'
    }
  },
  props: {
    dataList: {
      type: Array
    },
    sortTitle: {
      type: String
    }
  },
  created () {},
  mounted () {},
  methods: {
    showDetail (item) {
      this.imagesShowDate = []
      // 得到选中的项目id,根据id获取该项目的详情信息
      getOneProject({projectId: item.id}).then(res => {
        res.imgs.forEach((one, i) => {
          this.imagesShowDate.push(this.img_front + one.url_img)
        })
        this.choosedProject.label = res.projec_name
      })
      ImagePreview(this.imagesShowDate)
    }
  }
}
</script>

<style scoped lang="scss">
  .ProjectList {
    .title {
      width: 90%;
      border: 1px solid #8c939d;
      background-color: #e4e7ed;
      padding: 8px;
      margin: 0 auto;
      text-align: center;
      font-weight: 600;
      letter-spacing: 20px;
      margin-top: 10px;
      border-radius: 20px;
    }

    .list-text {
      text-align: center;
      font-size: 12px;
      background-color: #66b1ff;
      width: 100%;
      color: #ffffff;
    }
  }
</style>
